<template>
    <div>
        <div class="map-btn-p">
          <div :class="{'active': type == 'gaode'}" 
            @click="change('gaode')"
          class="map-btn">高德</div>
          <div :class="{'active': type == 'baidu'}" 
             @click="change('baidu')"
          class="map-btn">百度</div>
      </div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            type: 'gaode'
        }
    },
    methods: {
        change(type){
            if (type == this.type) {
                return
            }
            this.type = type
            this.$emit('change', this.type)
        }
    },
    mounted(){

    }
}
</script>
<style scoped>
.map-btn-p{
  position: absolute;left: 0.2rem;top: 3rem;background: #fff;box-shadow: 0 0 0.1rem 0 rgba(0,0,0,0.3);
}
.map-btn{
    display: inline-block;padding: 0.2rem;
}
.map-btn.active{
  background: #128FEF;color: #fff;
}
</style>